<template>
  <view class="ws-shop">
    <!-- 上 -->
    <view class="shop-goods-top">
      <searchBarHeader @search="searchQuery"></searchBarHeader>
    </view>
    <!-- 中 -->
    <view class="shop-goods-middle">
      <view class="uni-padding-wrap uni-common-mt">
        <uni-segmented-control :current="current" :values="items" style-type="button"
          :active-color="activeColor" @clickItem="onClickItem" />
      </view>
    </view>
    <!-- 下 -->
    <view class="shop-goods-bottom">
      <cardListImg class="shop-img-card"
        :isShopShow="true"
      ></cardListImg>
    </view>
  </view>
</template>

<script setup>
  import { ref } from "vue";
  import searchBarHeader from "/components/search-bar-header/search-bar-header.vue"
  import cardListImg from "/components/ws-shopping/card-list-img.vue"
   
  // 搜索
  const searchQuery = (val)=>{
    console.log('----',val);
  }
  // 中
  const items = ref(['综合', '价格'])
  const current = ref(0)
  const activeColor = ref('#FF2442') 
  const onClickItem = (val)=>{
    console.log('----',val);
  }
  
</script>

<style lang="scss">
  .ws-shop{
    width: 100%;
    
    .shop-goods-middle{
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .uni-padding-wrap{
        width: 80%;
      }
    } 
    .shop-goods-bottom {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10px;
      margin-bottom: 20px;
      .shop-img-card{
        width: 96%;
      }
    }
  }

</style>
